<script setup lang="ts">
    import { ref, onMounted } from 'vue'
    import { useRoute, useRouter } from 'vue-router'
    import { showToast } from 'vant'
    import { productListAPIRes, techDetailAPIRes, placeOrderAPIRes, orderAddClockAPIRes } from '@/api'
    import { useAddress } from '@/store/address.ts'
    import wx from 'weixin-js-sdk'

    const { query } = useRoute()
    const router = useRouter()
    const userAddress = useAddress()
    const techInfo = ref<any>({})
    const listData = ref<any>([])

    const onPlaceOrder = async (item: any) => {
        const productName = query.type == '1' ? query.name : item.name
        const { data } = await placeOrderAPIRes({ totalAmount: item.price, productName: `${productName}（加钟）` })
        wx.chooseWXPay({
            timestamp: data.data.timeStamp,
            nonceStr: data.data.nonceStr,
            package: data.data.package,
            signType: data.data.signType,
            paySign: data.data.paySign,
            success: async() => {
                const opt = {
                    orderNo: data.orderNo,
                    associationOrderNo: query.orderNo,
                    pid: query.type == '1' ? Number(query.pid) : item.id,
                    aid: Number(query.aid),
                    totalAmount: item.price,
                    payType: 1,
                    orderType: query.type == '1' ? 3 : 4,
                    productName,
                    userName: userAddress.name,
                    techInfo: techInfo.value,
                    addTimeType: item.addTimeType || null
                }
                await orderAddClockAPIRes(opt)
                showToast('加钟成功')
                router.back()
            },
            cancel: (err) => {
                console.log('err')
                console.log(err)
            },
            fail: (fa) => {
                console.log('fa')
                console.log(fa)
            }
        })
    }
    const getTechDetail = async () => {
        const { data } = await techDetailAPIRes({ id: query.tid })
        techInfo.value.id = data.id
        techInfo.value.openid = data.openid
        techInfo.value.mobile = data.mobile
        techInfo.value.nickname = data.nickname
    }
    const getProductList = async () => {
        const { data } = await productListAPIRes({ tid: query.tid  })
        listData.value = data
    }

    onMounted(() => {
        getTechDetail()
        if (query.type == '2') {
            getProductList()
        } else {
            listData.value = [
                { addTimeType: 1, name: '20分钟', price: 80 },
                { addTimeType: 2, name: '30分钟', price: 100 },
                { addTimeType: 3, name: '40分钟', price: 120 }
            ]
        }
    })
</script>

<template>
    <van-nav-bar :title="query.type == '1' ? '加时长' : '加项目'" left-arrow fixed placeholder :border="false" @click-left="router.back()" />
    <div v-if="listData.length > 0 && query.type == '1'" class="grid gap-4 grid-cols-2 p-4">
        <van-button v-for="(item, index) in listData" :key="index" color="#7C6186" @click="onPlaceOrder(item)">{{ item.name }}（{{ item.price }}元）</van-button>
    </div>
    <div v-if="listData.length > 0 && query.type == '2'" class="px-4 pt pt-2.5 overflow-hidden bg-white">
        <div v-for="item in listData" :key="item.id" class="flex mb-3">
            <van-image
                radius="8"
                width="4rem"
                height="4rem"
                fit="cover"
                class="mr-2.5"
                :src="item.productImg"
            />
            <div class="flex-1 flex flex-col justify-between">
                <div class="flex items-center justify-between">
                    <span class="text-base font-bold text-[#232a24]">{{ item.name }}</span>
                    <div class="text-sm text-[#666]"><van-icon name="underway-o" color="#7C6186" :size="14" /> {{ item.duration }}分钟</div>
                </div>
                <div class="flex items-center justify-between">
                    <div class="text-base text-[#ff2404]">¥ <span class="text-lg font-bold">{{ item.price.toFixed(2) }}</span></div>
                    <van-button color="#7C6186" size="small" @click="onPlaceOrder(item)"><div class="px-4">加钟</div></van-button>
                </div>
            </div>
        </div>
    </div>
    <van-empty v-if="listData.length == 0" image-size="100" description="暂无内容" />
</template>